<div class="challenge-card">
  <div class="ev-card-panel card-bt-margin">
    <div class="ev-md-container bottom-hr-line">
      <div (click)="challenge.refreshSubmissionData()" class="pointer update-page" *ngIf="challenge.showUpdate">
        <span class="text-white"
          >Page is outdated, Click to update&nbsp; <i class="fa fa-refresh text-highlight"></i
        ></span>
      </div>
      <div class="row row-lr-margin phase-title">
        <div class="col-sm-12">
          <h5 class="fw-light">My Submissions</h5>
        </div>
        <div class="col-sm-12">
          <span class="fw-light">My Participated Team:&nbsp;&nbsp;{{ participatedTeamName }}</span>
        </div>
      </div>
      <div class="row row-lr-margin">
        <div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad phase-select-box">
          <app-selectphase
            [phases]="filteredPhases"
            [phaseSelectionListType]="phaseSelectionListType"
            [phaseSelectionType]="phaseSelectionType"
            [phaseSelected]="phaseSelected()"
            #phaseselect
          ></app-selectphase>
        </div>
        <div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad">
          <div class="col-md-2 col-sm-2 col-xs-6 col-lg-6 col-lr-pad download-submissions">
            <mat-form-field>
              <mat-label>File</mat-label>
              <mat-select [(ngModel)]="fileSelected" class="rm-margin">
                <mat-option *ngFor="let key of fileTypes" value="{{ key.name }}">
                  {{ key.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div class="col-md-2 col-sm-2 col-xs-6 col-lg-6 col-lr-pad download-submissions">
            <a class="waves-effect waves-dark btn grad-btn ev-btn-dark fw-light fs-16" (click)="downloadSubmission()">Download </a>
          </div>
        </div>
      </div>
        <div class="row row-lr-margin" *ngIf="selectedPhase">
          <div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad">
              <span class="fw-light">
                Total Submissions Done:
            </span>
            <span class="show-submission-count text-highlight">
              {{ submissionCount || 0 }}
            </span>
          </div>
        </div>
      <!-- <br> -->
    </div>
    <div
      class="ev-card-body exist-team-card"
      *ngIf="!isPhaseSelected || (paginationDetails.showPagination == false && isPhaseSelected)"
    >
      <div class="row row-lr-margin">
        <div class="col-md-12 col-lr-pad">
          <div *ngIf="!isPhaseSelected" class="result-wrn fw-light">No phase selected.</div>
          <div *ngIf="paginationDetails.showPagination == false && isPhaseSelected" class="result-wrn">
            No results found.
          </div>
        </div>
      </div>
    </div>
    <div class="ev-card-body collapsible-table">
      <table
        mat-table
        *ngIf="paginationDetails.showPagination == true && submissions.length > 0"
        [dataSource]="submissions"
        multiTemplateDataRows
        class="mat-elevation-z0 ev-md-container"
      >
        <ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay; let i = index">
          <th class="cell-outside table-header fs-16 fw-regular" mat-header-cell *matHeaderCellDef>{{ columnsHeadings[i] }}</th>
          <td class="cell-outside fw-light align-center" mat-cell *matCellDef="let element">
            <span *ngIf="column === 's_no'" class="{{ element[column] }} fs-12"> {{ element[column] }}</span>
            <span *ngIf="column === 'submitted_at'" class="{{ element[column] }} fs-12"> {{ element[column] | date: 'medium' }}</span>
            <span *ngIf="element[column] !== 'None' && column === 'execution_time'" class="{{ element[column] }} fs-12"> {{ element[column] }} sec</span>
            <span *ngIf="element[column] === 'None' && column === 'execution_time'" class="{{ element[column] }} fs-12"> {{ 'N/A' }}</span>
            <a
              target="_blank"
              class="blue-text"
              [href]="element[column]"
              *ngIf="element[column] !== null && column !== 'status' && column !== 's_no' && column !== 'execution_time' && column !== 'submitted_at'"
            >
              <i class="fa fa-external-link"></i>
              Link
            </a>
            <span [ngClass]="element[column]" *ngIf="element[column] !== null && column === 'status'" class="fs-12">{{
              element[column] | uppercase
            }}</span>
            <span *ngIf="element[column] === null">{{ 'None' }}</span>
          </td>
        </ng-container>
        <ng-container matColumnDef="expandedDetail">
          <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
            <div
              [class.expanded-row]="element == expandedElement"
              [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"
              class="elements elements-margin"
            >
              <div class="elements-detail">
                <div class="element">
                  <strong class="element-description-attribution">Submission id :</strong> &nbsp;
                  <strong class="fw-light fs-14">
                    {{ element.id }}
                  </strong>
                </div>
                <div class="element">
                  <strong class="element-description-attribution">Submitted at: </strong>&nbsp;
                  <strong class="fw-light fs-14">
                    {{ element.submitted_at | date: 'medium' }}
                  </strong>
                </div>
              </div>
              <div class="elements-status" *ngIf="selectedPhase['leaderboard_public'] || isChallengeHost">
                <div class="element" *ngIf="selectedPhase['leaderboard_public']">
                  <mat-checkbox
                    class="element-icon fw-light"
                    [checked]="element.is_public"
                    [disabled]="element.status === 'failed' || element.status === 'cancelled'"
                    (change)="changeSubmissionVisibility(element.id, element.is_public)"
                  >
                    <strong class="fs-14">Show on leaderboard</strong>
                  </mat-checkbox>
                </div>
                <div class="element" *ngIf="isChallengeHost">
                  <mat-checkbox
                    class="element-icon fw-light"
                    [checked]="element.is_baseline"
                    [disabled]="element.status !== 'finished' && element.status !== 'partially_evaluated'"
                    (change)="changeBaselineStatus(element.id, element.is_baseline)"
                  >
                  <strong class="fs-14">Baseline</strong>
                  </mat-checkbox>
                </div>
              </div>
              <div class="elements-action">
                <div class="element">
                  <div class="element-icon fw-light">
                    <a class ="fs-14" (click)="editSubmission(element)"><i class="fa fa-pencil"></i> &nbsp; <strong class="element-description-attribution">Edit submission detail &nbsp;</strong> </a>
                  </div>
                </div>
                <div class="element">
                  <div class="element-icon fw-light">
                    <a class ="fs-14 w-300" (click)="cancelSubmission(element)"><i class="fa fa-times"></i> &nbsp; <strong class="element-description-attribution">Cancel submission &nbsp;</strong> </a>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr
          mat-row
          *matRowDef="let element; columns: columnsToDisplay"
          class="element-row"
          [class.expanded-row]="expandedElement === element"
          (click)="expandedElement = expandedElement === element ? null : element"
        ></tr>
        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
      </table>
    </div>

    <div class="pagination" *ngIf="paginationDetails.showPagination && submissions.length > 0">
      <div class="row row-lr-margin">
        <div class="col-sm-12 left-align col-lr-pad">
          <button
            [ngClass]="paginationDetails.isPrev"
            class="btn-floating btn-pagination waves-effect waves-light"
            (click)="loadPaginationData(paginationDetails.previous)"
          >
            <i class="fa fa-chevron-left"></i>
          </button>
          <span class="pagination-title">
            <strong class="text-med-black fw-semibold content">
              Page {{ paginationDetails.currentPage }} of {{ paginationDetails.totalPage }}
            </strong>
          </span>
          <button
            [ngClass]="paginationDetails.isNext"
            class="btn-floating btn-pagination waves-effect waves-light"
            (click)="loadPaginationData(paginationDetails.next)"
          >
            <i class="fa fa-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
